import React, { Component } from 'react'

export default class A extends Component {
    static tips = <div className='tips'>
        <br />
        <br />
        <p>初始化生命周期:</p>
        <p>constructor/componentDidMount</p>
        <p>更新生命周期：</p>
        <p>shouldComponentUpdate/componentDidUpdate</p>
        <p>销毁生命周期：componentWillUnmount</p>
        <p>父子组件的生命周期调用顺序也是值得关注的一点</p>
        <p>生命周期实质上就是函数被调用</p>
        <p>例如，当render函数创建渲染树后，自组件的componentDidMount先被调用，这是因为子组件处于更底部的节点，底部节点在递归时更早被结束</p>
        <p>但在遇到问题时，研究这些并没有直接写一下代码运行来快，因为所有实现都是react写的，他想咋调用咋调用</p>
        <p>比如你可以阅读一下代码，并打开控制台</p>
    </div>
    static official = 'https://react.docschina.org/docs/state-and-lifecycle.html'
    
    constructor(props) {
        super(props)
        this.state = {
            text: '',
            switch: true
        }
        console.log('CompA constructor')
    }
    componentDidMount() {
        console.log('CompA componentDidMount')
    }

    shouldComponentUpdate(nextProps, nextState) {
        console.log('CompA shouldComponentUpdate')
        return true
    }

    componentWillUnmount() {
        console.log('CompA componentWillUnmount')
    }

    componentDidUpdate() {
        console.log('CompA componentDidUpdate')
    }

    render() {
        console.log('CompA')
        return (
            <div>
                <div>无聊但重要的生命周期勾子</div>
                <label onClick={() => {
                    this.setState({ switch: !this.state.switch })
                }}>显隐开关<input checked={this.state.switch} type="checkbox" /></label>

                {
                    this.state.switch
                        ? <label>修改props<input value={this.state.text} onChange={(e) => {
                            this.setState({ text: e.target.value })
                        }} type="text" /></label>
                        : null
                }


                <p>开关控制组件显示隐藏</p>
                {
                    this.state.switch
                        ? <B />
                        : null
                }
            </div>
        )
    }
}

class B extends React.Component {
    constructor(props) {
        super(props)
        console.log('CompB constructor')
    }
    componentDidMount() {
        console.log('CompB componentDidMount')
    }

    shouldComponentUpdate(nextProps, nextState) {
        console.log('CompB shouldComponentUpdate')
        // console.log('CompB this.props/nextProps', this.props, nextProps)
        return true
    }

    componentWillUnmount() {
        console.log('CompB componentWillUnmount')
    }

    componentDidUpdate() {
        console.log('CompB componentDidUpdate')
    }
    render() {
        console.log('CompB')
        return <img src='http://t14.baidu.com/it/u=2215868056,206379323&fm=224&app=112&f=JPEG?w=227&h=151&s=72A02EAFD45247D24B89346C0300C068' />
    }
}
